<template>
  <div>
    
    <template v-for="(item,index) in fieldValue">
      <button-html v-if="isButton" :key="index" v-bind="item.props" :prop="prop" v-on="$listeners" :txtValue="txtValue"></button-html>
    </template>
    <el-dropdown v-if="!isButton" trigger="click" :hide-on-click="true" @command="checkCommandButton">
        <el-button type="primary" size="medium" >
            <i class="el-icon-setting"></i> 操作 <i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <template v-for="(item,index) in fieldValue">
            <el-dropdown-item :key="index" :command="index"><i v-if="item.props.icon" :class="item.props.icon"></i> {{item.props.value}}</el-dropdown-item>
          </template>
        </el-dropdown-menu>
      </el-dropdown>
   
  </div>
</template>

<script>
 import buttonHtml from './button.vue';
 import dropdown from './dropdown.vue';
 import analysisIfParam from '@/utils/analysis-if-param.js'

export default {
  components: { buttonHtml,dropdown},
  props: {
    children: {
        type: Array,
        default() {
          return []
        }
    },
    prop: {
      type: [String,Number]
    },
    txtValue: {
        type: [Object,Array],
        default() {
          return {}
        }
    }

  },
  data(){
    return {
      isButton:true
    }
  },
  computed: {
    fieldValue: {
      get() {
        // console.log(this.$attrs,this.children,'--------------')
        

        var child = [];
        this.children.map((item)=>{
            if(this.isShow(item.props.ifValue) && item['is-show']) {
              child.push(item);
            }
            return item;
        });
        
        if(child.length > 2 && this.prop === 'operation') {
          this.isButton = false;
        }

        return child;
        // return this.children || []
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    
  },
  methods: {
    isShow(ifValue){
      if(ifValue && typeof this.txtValue == 'object' && JSON.stringify(this.txtValue) !== '{}') {
          return analysisIfParam.init(ifValue,this.txtValue);
      }
      return true;
    },
    checkCommandButton(command){
          this.$emit('buttonClick',this.fieldValue[command].props);
    }
  }

}
</script>


